<template>
  <div class="container">
    <el-dialog
      title="添加返点结算单"
      :visible.sync="adddialog.centerDialogVisible"
      width="400px"
      center
      :lock-scroll="true"
      :before-close="hideDialog"
      @open="getData"
    >
      <el-form label-width="130px" label-position="left">
        <el-form-item label="供应商：">
          <el-select
            size="small"
            v-model="inside.value"
            :multiple="false"
            filterable
            remote
            center
            reserve-keyword
            placeholder="请选择供应商"
            :remote-method="insideRemoteMethod"
            :loading="inside.loading"
            @change="getOptionId(inside.value)"
          >
            <el-option
              v-for="item in inside.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配送中心：">
          <el-select
            v-model="formData.dccode"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请选择配送中心"
            :remote-method="insideDistribution"
            :loading="distribution.loading"
          >
            <el-option
              v-for="item in distribution.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="返点金额：" prop="name">
          <el-input
            style="width: 200px"
            size="small"
            v-model="formData.amount"
            placeholder="请输入返点金额"
          />
        </el-form-item>

        <el-form-item label="采购员：">
          <el-select
            size="small"
            v-model="purchase.value"
            :multiple="false"
            filterable
            remote
            center
            reserve-keyword
            placeholder="请选择采购员"
            :remote-method="insidePurchaseMethod"
            :loading="inside.loading"
            @change="getPurchase(purchase.value)"
          >
            <el-option
              v-for="item in purchase.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品：">
          <el-select
            size="small"
            v-model="commodity.value"
            :multiple="false"
            filterable
            remote
            center
            reserve-keyword
            placeholder="请选择商品"
            :remote-method="insideCommodityMethod"
            :loading="inside.loading"
            @change="getCommodity(commodity.value)"
          >
            <el-option
              v-for="item in commodity.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="返点商品数量：" prop="name">
          <el-input
            style="width: 200px"
            size="small"
            v-model="formData.goods_num"
            placeholder="请输入返点商品数量"
          />
        </el-form-item>

        <el-form-item label="返点商品价格：" prop="name">
          <el-input
            style="width: 200px"
            size="small"
            v-model="formData.goods_price"
            placeholder="请输入返点商品价格"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="name">
          <el-input
            style="width: 200px"
            size="small"
            v-model="formData.market"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectRdcDataNew } from "@/api/permission/adminlist";
import { addBackState } from "@/api/superSettlement/settlementList";
import {
  selectBuyerList,
  selectErpGoodsList,
  selectSupplierList
} from "@/api/putStorage/superPurchaseList";

export default {
  props: {
    adddialog: Object
  },
  data() {
    return {
      formData: {
        supplier_id: "", //供应商id
        goods_name: "", //返点商品
        erp_goods_id: "", //返点商品id
        erp_goods_code: "", //返点商品code
        unit: "", //商品单位
        category_code: "", //返点商品分类code
        category_name: "", //分类名称
        goods_num: "", //返点商品数量
        goods_price: "", //返点商品价格
        buyer_id: "", //采购人cid
        buyer_code: "", //采购人code
        buyer_name: "", //采购人名
        amount: "", //返点总结
        bar_code: "", //条形码
        market: "", //备注
        dccode: ""
      },
      inside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      purchase: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      commodity: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      distribution: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      tableData: [],
      commodityList: []
    };
  },
  methods: {
    //获取修改数据
    getData() {
      let data = {
        page: 1,
        limit: 100
      };
      //获取供应商列表
      selectSupplierList(data).then(res => {
        this.inside.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.id}`,
            label: `${item.supplier_name}(${item.supplier_code})`,
            code: `${item.supplier_code}`
          };
        });
      });
      //获取商超采购员列表
      selectBuyerList(data).then(res => {
        this.purchase.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.id}`,
            label: `${item.name}(${item.code})`,
            code: `${item.code}`,
            name:`${item.name}`,
          };
        });
      });
      //配送中心
      selectRdcDataNew(data).then(res => {
        this.distribution.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.d_code}`,
            label: `${item.d_name}`
          };
        });
      });
      //获取商超商品列表
      selectErpGoodsList(data).then(res => {
        this.commodityList = res.data.paginate.data;
        this.commodity.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.ProductId}`,
            label: `${item.Name}`,
            code: `${item.Code}`,
            unit: `${item.Unit}`,
            categorycode: `${item.ClassCode}`,
            categoryname: `${item.ClassName}`,
            bar_code: `${item.BarCode}`
          };
        });
      });
    },
    //获取供应商数据
    getSupplierList(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      this.inside.loading = true;
      selectSupplierList(data).then(res => {
        this.inside.list = res.data.paginate.data.map(item => {
          return {
            value: `${item.id}`,
            label: `${item.supplier_name}(${item.supplier_code})`,
            code: `${item.supplier_code}`
          };
        });
        this.inside.loading = false;
        this.inside.options = this.inside.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    // 嵌套搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.inside.options = [];
      }
    },
    //选择供应商获取ID
    getOptionId(e) {
      let data = this.inside.options.filter(res => {
        return res.value == this.inside.value;
      });
      console.log(data);
      this.formData.supplier_id = data[0].value;
    },

    // 嵌套搜索采购员数据
    insidePurchaseMethod(query) {
      if (query !== "") {
        this.getPurchaseList(query);
      } else {
        this.purchase.options = [];
      }
    },
    getPurchaseList(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      this.purchase.loading = true;
      selectBuyerList(data).then(res => {
        this.purchase.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.id}`,
            label: `${item.name}(${item.code})`,
            code: `${item.code}`,
            name:`${item.name}`,
          };
        });
        this.purchase.loading = false;
       
      });
    },
    getPurchase(e) {
      let data = this.purchase.options.filter(res => {
        return res.value == this.purchase.value;
      });
      console.log(data, 12321313, this.purchase.value);
      this.formData.buyer_id = data[0].value;
      this.formData.buyer_code = data[0].code;
      this.formData.buyer_name = data[0].name;
    },

    // 嵌套搜索商品数据
    insideCommodityMethod(query) {
      if (query !== "") {
        this.getCommodityList(query);
      } else {
        this.commodity.options = [];
      }
    },
    getCommodityList(query) {
      let data = {
        goods_code: query,
        page: 1,
        limit: 100
      };
      this.purchase.loading = true;
      selectErpGoodsList(data).then(res => {
        this.commodityList = res.data.paginate.data;
        this.commodity.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.ProductId}`,
            label: `${item.Name}`,
            code: `${item.Code}`,
            unit: `${item.Unit}`,
            categorycode: `${item.ClassCode}`,
            categoryname: `${item.ClassName}`,
            bar_code: `${item.BarCode}`
          };
        });
        this.commodity.loading = false;
        // this.commodity.options = this.commodity.list.filter((item) => {
        //   return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        // });
      });
    },
    getCommodity(e) {
      let data = this.commodity.options.filter(res => {
        return res.value == this.commodity.value;
      });
      console.log(data, 12321313);
      this.formData.erp_goods_id = data[0].value;
      this.formData.erp_goods_code = data[0].code;
      this.formData.goods_name = data[0].label;
      this.formData.bar_code = data[0].bar_code;
      this.formData.unit = data[0].unit;
      this.formData.category_code = data[0].categorycode;
      this.formData.category_name = data[0].categoryname;
    },
    //搜索配送中心
    insideDistribution(query) {
      if (query !== "") {
        this.getDistribution(query);
      } else {
        this.procurement.options = [];
      }
    },
    getDistribution(query) {
      let data = {
        code_or_name: query,
        page: 1,
        limit: 200
      };
      this.distribution.loading = true;
      selectRdcDataNew(data).then(res => {
        this.distribution.loading = false;
        this.distribution.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.d_code}`,
            label: `${item.d_name}`
          };
        });
        // this.distribution.options = this.distribution.list.filter(item => {
        //   this.distribution.loading = false;
        //   return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        // });
      });
    },
    hideDialog() {
      this.adddialog.centerDialogVisible = false;
      this.formData = {
        supplier_id: "", //供应商id
        goods_name: "", //返点商品
        erp_goods_id: "", //返点商品id
        erp_goods_code: "", //返点商品code
        unit: "", //商品单位
        category_code: "", //返点商品分类code
        category_name: "", //分类名称
        goods_num: "", //返点商品数量
        goods_price: "", //返点商品价格
        buyer_id: "", //采购人cid
        buyer_code: "", //采购人code
        buyer_name: "", //采购人名
        amount: "", //返点总结
        market: "", //备注
        bar_code: "",
        dccode: ""
      };
      this.distribution = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
      this.inside = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      };
      this.purchase = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      };
      this.commodity = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      };
      this.tableData = [];
      this.commodityList = [];
    },

    //提交
    confirm() {
      if (this.formData.supplier_id == "") {
        this.$message({
          type: "info",
          message: "请选择供应商"
        });
      } else if (this.formData.dccode == "") {
        this.$message({
          type: "info",
          message: "请选择配送中心"
        });
      } else if (this.formData.buyer_id == "") {
        this.$message({
          type: "info",
          message: "请选择采购员"
        });
      } else if (this.formData.erp_goods_id == "") {
        this.$message({
          type: "info",
          message: "请选择商品"
        });
      } else if (this.formData.amount == "") {
        this.$message({
          type: "info",
          message: "请输入返点金额"
        });
      } else if (this.formData.goods_num == "") {
        this.$message({
          type: "info",
          message: "请输入返点商品数量"
        });
      } else if (this.formData.goods_price == "") {
        this.$message({
          type: "info",
          message: "请输入返点商品价格"
        });
      } else {
        let data = {
          supplier_id: this.formData.supplier_id,
          amount: this.formData.amount,
          goods_name: this.formData.goods_name,
          erp_goods_id: this.formData.erp_goods_id,
          erp_goods_code: this.formData.erp_goods_code,
          unit: this.formData.unit,
          goods_num: this.formData.goods_num,
          goods_price: this.formData.goods_price,
          category_code: this.formData.category_code,
          category_name: this.formData.category_name,
          buyer_id: this.formData.buyer_id,
          buyer_code: this.formData.buyer_code,
          buyer_name: this.formData.buyer_name,
          bar_code: this.formData.bar_code,
          market: this.formData.market,
          dccode:this.formData.dccode
        };
        console.log(data);
        // return;
        addBackState(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg || res.message
            });
            this.$emit("upData");
            this.hideDialog();
          }
        });
      }
    },
    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.tab {
  display: flex;
}
.tab .el-form-item {
  flex: 1;
}
</style>
